<template>
	<div class="mt-2">
		<div class="flex items-center text-t-3">
			<base-icon name="game1" size="20"></base-icon>
			<div class="ml-1">{{ $t('slotsProfile.statistics') }}</div>
		</div>
		<div>
			<base-loading-box class="min-h-[300px] w-full" :isEmpty="!data?.length" :loading="loading">
				<div>
					<CasinoItem type="slots" v-for="(item, index) in data" :key="index" :data="item" />
				</div>
			</base-loading-box>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { inject, Ref, watch } from 'vue'
import { BaseIcon, BaseLoadingBox } from '@/components/base'
import { getRecentGames, getRecentOtherGames } from '@/api/slots'
import { useRequest } from '@/hooks'
import CasinoItem from '@/components/profile/casino-item/index.vue'

const userId = inject<Ref<string>>('userId')
const isMe = inject<Ref<boolean>>('isMe')

const { run, data, loading } = useRequest<any>(isMe!.value ? getRecentGames : getRecentOtherGames)

// run({
// 	userId: userId!.value
// })

watch(
	() => userId?.value,
	() => {
		if (userId?.value) {
			run({
				userId: userId!.value
			})
		}
	},
	{
		immediate: true
	}
)
</script>
